<template>
  <div>
    <!-- <MyProduct
      v-for="item in list"
      :key="item.id"
      :price="item.proprice"
      :title="item.proname"
      :info="item.msg"
      :id="item.id"
      @kan="kanFn"
    /> -->
    <MyProduct :title="title" />
    <MyProduct  />
  </div>
</template>

<script>
//引入
//注册
//父向子传值
//1.在父组件中给子组件标签添加自定义属性
//2.在子组件中使用props来接收
import MyProduct from "./components/MyProduct.vue";
export default {
  components: {
    MyProduct,
  },
  data() {
    return {
      // list: [
      //   {
      //     id: 1,
      //     proname: "超级好吃的棒棒糖",
      //     proprice: 18.8,
      //     msg: "棒棒糖真好吃",
      //   },
      //   {
      //     id: 2,
      //     proname: "超级好吃的大鸡腿",
      //     proprice: 34.2,
      //     msg: "大鸡腿真不错",
      //   },
      //   {
      //     id: 3,
      //     proname: "超级无敌的冰激凌",
      //     proprice: 14.2,
      //     msg: "冰淇淋真爽啊",
      //   },
      // ],
      title: "棒棒鸡好吃",
    };
  },
  methods: {
    kanFn(id) {
      const product = this.list.find((item) => item.id === id);
      product.proprice -= 2;
    },
  },
};
</script>

<style scoped>
</style>